<template>
  <div>
    <div class="mobility">
      <el-container>
        <el-aside width="259px">
          <el-menu
            router
            :default-active="NavState"
            class="el-menu-vertical-demo"
            background-color="#282B3B"
            text-color="#fff"
            active-text-color="#FAE248"
            active-background-color='#FAE248'
          >
            <el-menu-item index="/mobilityWk" @click="saveNavState(`/mobilityWk`)">
              <i class="el-icon-menu"></i>
              <span slot="title"> {{$t('Rewards.PositionMining')}}</span>
            </el-menu-item>
            <el-menu-item index="/bond" @click="saveNavState(`/bond`)">
              <i class="el-icon-document"></i>
              <span slot="title">{{$t('bond.Bond')}}</span>
            </el-menu-item>
            <el-menu-item index="/staking" @click="saveNavState(`/staking`)">
              <i class="el-icon-setting"></i>
              <span slot="title">Staking</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <div >
          <router-view></router-view>
        </div>
       
      
      </el-container>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      NavState:""
    };
  },
 created() {
    // this.getMenuList()
    // 获取激活选项
  //  console.log(this.$route.path)
    // this.NavState = window.sessionStorage.getItem("NavState");
    this.NavState = this.$route.path
  },
  methods: {
    // 保存激活选项
    saveNavState(NavState) {
      window.sessionStorage.setItem("NavState", NavState);
      this.NavState = this.NavState;
    },
  },
};
</script>
<style lang="scss" scoped>
//   @import "./index.scss";
.mobility {
  width: 1366px;
  // height: 955px;
  margin: 20px auto;
  .el-container {
    .el-aside {
      height: 912px;
      padding: 0;
      background: #282b3b;
      border: 15px solid #282b3b;
      box-sizing: border-box;
      .el-menu {
        border-right: solid 0px #e6e6e6;
      }
    }
    .el-main {
      // height: 912px;
      background: #13141f;
      // background: #3644d8;
      overflow: hidden;
      .div1 {
        margin-bottom: 30px;
        .div1-title {
          font-size: 18px;
          font-family: PingFangSC-Semibold;
          line-height: 25px;
          color: #e2e4ee;
          opacity: 1;
        }
        .div1-data {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 20px;
          color: #747788;
          margin-top: 10px;
          opacity: 1;
          a {
            color: #fae248;
          }
        }
      }
      .div2 {
        height: 170px;
        width: 100%;
        margin-bottom: 28px;
        display: flex;
        .div2Item {
          width: 430px;
          height: 160px;
          background: #282b3b;
          border-radius: 4px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          margin: 10px;
          .span1 {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 22px;
            color: #b0b7d6;
            opacity: 1;
          }
          .span2 {
            font-size: 36px;
            font-family: DINbek Bold;
            font-weight: bold;
            line-height: 44px;
            color: #ffffff;
          }
          .span3 {
            font-size: 14px;
            font-family: PingFang HK;
            font-weight: 400;
            line-height: 20px;
            color: #b0b7d6;
            opacity: 1;
          }
          .spanDiv {
            width: 100px;
            height: 30px;
            background: #454233;
            line-height: 30px;
            text-align: center;
            span {
              color: #fae248;
            }
          }
        }
      }
      .hisP {
        font-size: 18px;
        font-family: PingFangSC-Semibold;
        line-height: 25px;
        color: #e2e4ee;
      }
      .tableDiv{
        height: 545px;
        background: #2f3241;
      }
    }
    .el-footer{
      height: 43px;
      text-align: right;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.el-table::before, .el-table--group::after, .el-table--border::after {
    content: "";
    position: absolute;
    background-color: #2f3241 !important; 
}
.el-menu-item{
  font-size: 13px;
}
</style>
